import { lazy, Suspense } from 'react'
import { useRoutes, type RouteObject } from 'react-router'
import RequireAuth from './RequireAuth'

const Home = lazy(() => import('../pages/Home'))
const Login = lazy(() => import('../pages/login')) //路由懒加载
const Index = lazy(() => import('../pages/Index')) //路由懒加载
const About = lazy(() => import('../pages/About')) //路由懒加载
const Stores = lazy(() => import('../pages/stores'))
const News = lazy(() => import('../pages/news'))
const NewsAdd = lazy(() => import('../pages/newsAdd'))
const StoresAdd = lazy(() => import('../pages/storesAdd'))
const Advertisement = lazy(() => import('../pages/advertisement'))

const Questions = lazy(() => import('../pages/questions')) //路由懒加载
const Staffs = lazy(() => import('../pages/staffs'))
const Fee = lazy(() => import('../pages/fee')) //路由懒加载

const Userinfo = lazy(() => import('../pages/Userinfo')) //路由懒加载

const Building = lazy(() => import('../pages/Buildings/Buildings'))
const House = lazy(() => import('../pages/house/house'))
const Administratorrole = lazy(() => import('../pages/administratorrole/administratorrole'))
const Administrator = lazy(() => import('../pages/Administrator/Administrator'))
const routers: RouteObject[] = [
    {
        path: '/',
        element: <Login></Login>,
    },
    {

        path: '/login',
        element: <Login></Login>,
    },
    {

        path: '/',
        element: <Suspense><RequireAuth><Home /></RequireAuth></Suspense>,
        children: [
            {
                path: '/index',
                element: <Index></Index>,
            },
            {
                path: '/fee',
                element: <Suspense fallback={<div>loadding</div>}><Fee /></Suspense>,
            },
            {
                path: '/questions',
                element: <Suspense fallback={<div>loadding</div>}><Questions /></Suspense>,
            },
            {
                path: '/staffs',
                element: <Suspense fallback={<div>loadding</div>}><Staffs /></Suspense>,
            },
            {
                path: '/userinfo',
                element: <Index />,
            },
            {
                path: '/building',
                element: <Building />,
            },
            {
                path: '/house',
                element: <House />,
            },
            {
                path: '/administratorrole',
                element: <Administratorrole />,
            },
            {
                path: '/administrator',
                element: <Administrator />,
            },
            {
                path: '/stores',
                element: <Suspense fallback={<div>loa123123dding</div>}><Stores /></Suspense>,
            },
            {
                path: '/stores/add/:id',
                element: <Suspense fallback={<div>loa123123dding</div>}><StoresAdd /></Suspense>,
            },
            {
                path: '/news',
                element: <Suspense fallback={<div>loa123123dding</div>}><News /></Suspense>,
            },
            {
                path: '/news/add/:id',
                element: <Suspense fallback={<div>loa123123dding</div>}><NewsAdd /></Suspense>,
            },
            {
                path: '/advertisement',
                element: <Suspense fallback={<div>loa123123dding</div>}><Advertisement /></Suspense>,
            },
        ]
    },

]
export default () => {
    return useRoutes(routers)
}